<template>
  <div class="actual-time-car-map">
    <div class="actual-time-car-map-box" id="map-container"></div>
    <div class="all-checkbox-list">
      <nanning-screen-checkbox @on-change-checkbox="onChangeCheckbox" @on-change-visible="onChangeVisible" v-model="checkedLabel" :visibleCheckboxList="visibleCheckboxList"></nanning-screen-checkbox>
    </div>
    <car-infor-pop id="car-infor-pop" :carInforPopData="carInforPopData"></car-infor-pop>
    <search-pop id="search-pop"></search-pop>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import carInforPop from '../../components/carInforPop/index.vue'
import searchPop from '../../components/searchPop/index.vue'
import Bus from 'utils/eventBus'
// @ts-ignore
import ActualTimeCar from '../../../basic/ActualTimeCar.js'

@Component({
  name: 'actual-time-car-map',
  components: {
    carInforPop,
    searchPop
  }
})
export default class ActualTimeCarMap extends Vue {
  private checkedLabel = [1, 2, 3] // 默认选中的值

  private visibleCheckboxList = true

  private carInforPopData = [
    {
      label: '线路名称：',
      value: '223路'
    },
    {
      label: '车牌号：',
      value: '桂A56230'
    },
    {
      label: '所属公司：',
      value: '南宁公交有限公司'
    },
    {
      label: '司机姓名：',
      value: '王德凯'
    },
    {
      label: '联系方式：',
      value: '18300592204'
    },
    {
      label: '载客数量：',
      value: '35人'
    },
    {
      label: '时速：',
      value: '40km/h'
    }
    // {
    //   label: '下站到达：',
    //   value: '王哥庄（4秒）',
    //   icon: require('assets/images/situational-awareness/dingwei.png')
    // },
    // {
    //   label: '车载监控：',
    //   value: '人脸识别监控1',
    //   icon: require('assets/images/situational-awareness/jiankong.png')
    // }
  ]

  private onChangeCheckbox(value: any) {
    console.log('多选框选中的值', value)
  }

  private onChangeVisible(value: any) {
    this.visibleCheckboxList = value
  }

  created() {
    Bus.$on('onClickCarSearch', (value: any) => {
      console.log('实时车辆---地图盒子', value)
    })
  }
  mounted() {
    return new ActualTimeCar()
  }
}
</script>

<style lang="scss" scoped>
.actual-time-car-map {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  &-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;
  }
  .all-checkbox-list {
    position: absolute; // 定位的基准是中间地图的大盒子
    left: calc(25.47% + 6px);
    top: 20px;
    animation: fadeInLeftList 0.7s linear;
  }
  // #car-infor-pop {
  //   position: absolute; // 定位的基准是中间地图的大盒子
  //   left: 55%;
  //   top: 20px;
  // }
  #search-pop {
    position: absolute; // 定位的基准是中间地图的大盒子
    left: 55%;
    top: 50%;
  }
}
</style>
